<template>
  <div style="height: 100%;width: 100%">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">注册</span>
      </x-header>
      <div class="main-headerAndTab">
        <!--<div class="weui-cells_form">-->
          <group gutter="0">
            <cell-box>
              <x-input placeholder="请输入手机号码" class="input"  mask="99999999999" is-type="china-mobile"  :max="11" v-model="mobile" >
                <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/loginPhone.png" width="24" height="24">
              </x-input>
            </cell-box>
            <cell-box>
              <x-input placeholder="请输入图形码" class="input"  mask="99999999999"   :max="4" v-model="pictureCode">
                <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/code.png" width="24" height="24">
              </x-input>
              <div @click="refreshCode()" class="code">
                <identify :identifyCode="identifyCode" ></identify>
              </div>
            </cell-box>
            <cell-box>
              <x-input placeholder="请输入密码" :show-clear="false" class="input" type="password" v-model="pwd">
                <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/password2.png" width="24" height="24">
              </x-input>
            </cell-box>
            <cell-box>
              <x-input placeholder="请输入验证码" class="input"  mask="99999999999"   :max="4" v-model="code">
                <x-button slot="right" type="primary" mini v-if="hasCount" @click.native="getIdentifyingCode">发送验证码</x-button>
                <span slot="right" v-if="!hasCount" class="Obtain"><span class="second">{{count}}</span>S后重新获取</span>
              </x-input>
            </cell-box>
          </group>
        <!--</div>-->
        <div class="save">
          <x-button class="save-button" @click.native="regHandle">完成注册</x-button>
        </div>
    </div>
    </div>
  </div>

</template>

<script>
  // 引入验证码组件
  import identify from "../../components/page/identify.vue";
  import { sendSms, register, login ,checkIsRegister } from '@/api/user'
  import { isPhoneNumber } from '@/libs/util'
  import { cookie,Flexbox, FlexboxItem } from 'vux'
  export default {
    name: 'registr',
    // 注册验证码组件
    components: { Flexbox, FlexboxItem ,identify },
    data () {
      return {
        count:60,
        // 验证码初始值
        identifyCode: '1234',
        // 验证码的随机取值范围
        identifyCodes: '1234567890',
        hasCount:true,
        mobile:'',//手机号
        timer:null,
        code:'',//验证码
        pwd:'',//密码
        pictureCode:'',//图形码
      }
    },
    mounted () {
      // 刷新页面就生成随机验证码
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    methods: {
      back(){
        this.$router.go(-1)
      },
      // 点击验证码刷新验证码
      refreshCode(){
        this.identifyCode="";
        this.makeCode(this.identifyCodes,4);
      },
      // 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
      randomNum (min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 随机生成验证码字符串
      makeCode (data, len) {
        for (let i = 0; i < len; i++) {
          this.identifyCode += data[this.randomNum(0, data.length - 1)]
        }
        console.log(this.identifyCode);
      },
      //用户点击发生验证码时触发
      getIdentifyingCode(){
        console.log(this.mobile)
            this.hasCount = false
            //发送验证码
            sendSms(parseInt(this.mobile)).then( () =>{
              this.$vux.toast.show({
                text: '验证码已发送',
                type: 'success'
              })
            })
            //时间打点
            this.timer = setInterval(() => {
              this.count--;
              if (this.count === 0) {
                clearInterval(this.timer)
                this.count = 60;
                this.hasCount = true
              }
            }, 1000)
      },
      regHandle(){
        if (this.pwd.length <6){
          this.$vux.toast.show({
            text:'密码不能小于6位',
            type:'cancel'
          })
          return
        }
        if (this.pictureCode !== this.identifyCode) {
          this.$vux.toast.show({
            text:'图形码不正确',
            type:'cancel'
          })
          return
        }
        if (!this.code){
          this.$vux.toast.show({
            text:'验证码为空',
            type:'cancel'
          })
          return
        }
        else{
          register({
            mobile:this.mobile,
            password:this.pwd,
            code:this.code
          }).then( data =>{
            console.log(data)
              this.$vux.toast.show({
                text:'注册成功',
                type:'success'
              })
              this.$router.push({
                name:'registrationLogin'
              })
          })
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .save-button{
    background: #AD2532;
    border-radius: 22.5px;
  }
  .code{
    width: 5rem;
    height: 2.08rem;
    border: 1px solid #F4F4F4;
  }
  .input{
    width: 100%;
  }
  .Obtain{
    font-size: 14px;
  }
  .second{
    font-size: 16px;
  }
</style>
